﻿<!DOCTYPE html>
<html lang="en" class="ace ace-card-on ace-tab-nav-on ace-main-nav-on ace-sidebar-on" data-theme-color="#c0e3e7">

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Professor</title>
    <meta name="description" content="">

    <link rel="apple-touch-icon" href="apple-touch-icon.png">

    <!-- Google Fonts -->
    <link href="https://fonts.googleapis.com/css?family=Quicksand:400,700" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">

    <!-- Icon Fonts -->
    <link href="../../static/main_style/fonts/icomoon/style.css" rel="stylesheet">

    <!-- Styles -->
    <link href="../../static/main_style/js/plugins/highlight/solarized-light.css" rel="stylesheet">
    <link href="../../static/main_style/style.css" rel="stylesheet">

    <!-- Modernizer -->
    <script type="text/javascript" src="../../static/main_style/js/vendor/modernizr-3.3.1.min.js"></script>
    <script type="text/javascript">

        function clickFavor(id) {
            var img = document.getElementById(id);
            var isFavor = img.getAttribute("alt");
            if (isFavor === "favor") {
                img.setAttribute("alt", "notFavor");
                img.setAttribute("src", "../../static/main_style/img/favor-1.png");
                var data = {};
                data["id"] = id;
                data["op"] = 0;

                $.ajax({
                        type: 'POST',
                        url: '/scholar/operateFavor',
                        dataType: 'json',
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify(data),
                        success: window.onload=function(callback) {
                            {#window.alert(callback.res + callback.id + callback.op);#}
                            {#console.log(callback);#}
                            {#window.alert(callback.first_name + " " + callback.last_name);#}
                            // Watch out for Cross Site Scripting security issues when setting dynamic content!
                            {#var elem = document.getElementById('hello');#}
                            {#console.log(elem);#}
                            {#elem.innerText = callback.first_name + ' ' + callback.last_name  + '!';#}
                            {#elem.style.color = "red";#}
                            {#$(this).text('Hello ' + callback.first_name + ' ' + callback.last_name  + '!');#}
                        },
                        error: function() {
                            window.alert("Something get error!")
                        }
                    });
            }
            else {
                img.setAttribute("alt", "favor");
                img.setAttribute("src", "../../static/main_style/img/favor-2.png");
                var data = {};
                data["id"] = id;
                data["op"] = 1;

                $.ajax({
                        type: 'POST',
                        url: '/scholar/operateFavor',
                        dataType: 'json',
                        contentType: 'application/json; charset=utf-8',
                        data: JSON.stringify(data),
                        success: window.onload=function(callback) {
                            {#window.alert(callback.res + callback.id + callback.op);#}
                            {#console.log(callback);#}
                            {#window.alert(callback.first_name + " " + callback.last_name);#}
                            // Watch out for Cross Site Scripting security issues when setting dynamic content!
                            {#var elem = document.getElementById('hello');#}
                            {#console.log(elem);#}
                            {#elem.innerText = callback.first_name + ' ' + callback.last_name  + '!';#}
                            {#elem.style.color = "red";#}
                            {#$(this).text('Hello ' + callback.first_name + ' ' + callback.last_name  + '!');#}
                        },
                        error: function() {
                            window.alert("Something get error!")
                        }
                    });
            }

        }


        function changeRecomm() {
            var recomm = document.getElementsByClassName("widget widget_posts_entries")[0];
            {#window.alert(recomm);#}
            var ul_list = recomm.children[1];
            t_name_list = [];
            for (i = 0; i < ul_list.children.length; ++i) {
                var li_name = ul_list.children[i].children[1].children[0].children[0].innerHTML;
                t_name_list.push(li_name)
            }
            var res;
            $.ajax({
                        type: 'POST',
                        url: '/scholar/recomm',
                        dataType: 'json',
                        contentType: 'application/json; charset=utf-8',
                        async:false,
                        data: JSON.stringify(t_name_list),
                        success: window.onload=function(callback) {
                             res = callback.recomm_list;
                        },
                        error: function() {
                            window.alert("Something get error!");
                        }
                    });
            if (!res) {
                window.alert("Something get error!");
            }
            var i = 0;
            for (i = 0; i < res.length; ++i) {
                var li = ul_list.children[i];
                var a1 = li.children[0];
                var div1 = li.children[1];
                var div2 = li.children[2];
                var img = a1.children[0];
                var a2 = div1.children[0].children[0];
                var a3 = div2.children[0];
                var a4 = div2.children[1];
                img.setAttribute("src", res[i][1]);
                a1.setAttribute("href", "../professor/" + res[i][0]);
                a2.setAttribute("href", "../professor/" + res[i][0]);
                a2.innerHTML = res[i][0];
                a3.innerHTML = (res[i][2]) ? res[i][2] : "None";
                a4.innerHTML = (res[i][3]) ? res[i][3] : "None";
            }
            {#window.alert(i + " " + ul_list.children.length);#}
            for (; i < ul_list.children.length; ++i) {
                {#window.alert(i + " " + ul_list[i]);#}
                ul_list.children[i].remove();
            }
        }
    </script>
</head>

<body>
    <div class="ace-wrapper">
        <header id="ace-header" class="ace-container-shift ace-logo-in ace-head-boxed ace-nav-right">
            <div class="ace-head-inner">
                <div class="ace-head-container ace-container">
                    <div class="ace-head-row">
                        <div id="ace-head-col1" class="ace-head-col text-left">
                            <a id="ace-logo" class="ace-logo" href={{ "index" }}>
                                <span>Researcher</span>
                            </a>
                        </div>

                        <div id="ace-head-col2" class="ace-head-col text-right">
                            <div class="ace-nav-container ace-container hidden-sm hidden-xs">
                                <nav id="ace-main-nav">
                                    <ul class="clear-list">
                                            <li><a href="#">about</a></li>
                                            <li><a href={{ "../index" }}>hot</a></li>
                                            <li><a href={{ "../search" }}>search</a></li>
                                            <li><a href={{ "../favor" }}>favor</a></li>
                                            <li><a href={{ "../logout" }}>logout</a></li>
                                    </ul>
                                </nav>
                            </div>
                        </div>

                        <div id="ace-head-col3" class="ace-head-col text-right">
                            <button id="ace-sidebar-btn" class="btn btn-icon btn-light btn-shade">
                                 <span class="ace-icon ace-icon-side-bar-icon"></span>
                             </button>
                        </div>
                    </div>
                </div>
                <!-- .ace-container -->
            </div>
            <!-- .ace-head-inner -->
        </header>
        <!-- #ace-header -->


        <article id="ace-card" class="ace-card bg-primary">
            <div class="ace-card-inner text-center">
                <img class="avatar avatar-195" src={{ Researcher_info.Avatar }} width="195" height="195" alt="">
                <h1>{{ Researcher_info.Name }}</h1>
                <p class="text-muted">{{ Researcher_info.Title }}</p>
{#                <a href={{ Researcher_info.HomePage }} target="_blank" style="font-size: 1em;">Homepage</a>#}
            </div>

            <footer class="ace-card-footer">
                <a class="btn btn-lg btn-block btn-thin btn-upper " href="{{ Researcher_info.HomePage }}">Home Page</a>
            </footer>
        </article>
        <!-- #ace-card -->

        <div id="ace-content" class="ace-container-shift">
            <div class="ace-container">

               <div id="ace-nav-wrap" class="hidden-sm hidden-xs">
                    <div class="ace-nav-cont">
                        <div id="ace-nav-scroll">
                            <nav id="ace-nav" class="ace-nav">
                                <ul class="clear-list">
                                    {% set url_name = Researcher_info.Name | replace (" ", "%20") %}
                                    <li>
                                        <a href="#" data-tooltip="Here"><img class="avatar avatar-42" src="../../static/my_style/imgs/ha_glass.jpg" alt=""></a>
                                    </li>
                                    <li>
                                        <a href={{ "../professor/" + url_name }} data-tooltip="Professor"><span
                                                class="ace-icon ace-icon-experience"></span></a>
                                    </li>
                                    <li>
                                        <a href={{ "../connection/"  + url_name }} data-tooltip="Connection"><span
                                                class="ace-icon ace-icon-portfolio"></span></a>
                                    </li>
                                    <li>
                                        <a href={{ "../paper/" + url_name }} data-tooltip="Paper"><span
                                                class="ace-icon ace-icon-references"></span></a>
                                    </li>
                                    <li>
                                        <a href="#" data-tooltip="Contact"><span
                                                class="ace-icon ace-icon-contact"></span></a>
                                    </li>
                                    <li>
                                        <a href="#" data-tooltip="Blog"><span
                                                class="ace-icon ace-icon-blog"></span></a>
                                    </li>
                                </ul>
                            </nav>
                        </div>

                        <div id="ace-nav-tools" class="hidden">
                            <span class="ace-icon ace-icon-dots-three-horizontal"></span>

                            <button id="ace-nav-arrow" class="clear-btn">
                                <span class="ace-icon ace-icon-chevron-thin-down"></span>
                            </button>
                        </div>
                    </div>
                    <div class="ace-nav-btm"></div>
                </div>
                <!-- .ace-nav-wrap -->

                <div class="ace-paper-stock">
                    <main class="ace-paper clearfix">

                        <div class="ace-paper-cont clear-mrg">

                            <!-- START: PAGE CONTENT -->
                            <div class="padd-box clear-mrg">
                                <section class="section brd-btm">
                                    <div class="row">
                                        <div class="col-sm-12 clear-mrg text-box">
                                            <h2 class="title-lg text-upper">About Me</h2>
                                            <div>
                                                <div style="display: inline; float: left">
                                                    <!-- NOTE 收藏 -->
                                                    <b>Helo, I’m {{ Researcher_info.Name }}</b>
                                                </div>
                                                <div style="display: inline; float: right">
                                                    <!-- NOTE 收藏 -->
                                                    {% if isFavor == "notFavor" %}
                                                        {% set url_star = "../../static/main_style/img/favor-1.png" %}
                                                    {% else %}
                                                        {% set url_star = "../../static/main_style/img/favor-2.png" %}
                                                    {% endif %}
                                                    <blockquote style="border-style:none;">
                                                        <img src={{ url_star }} ; id={{ Researcher_info.Name | replace (" ", "%20") }} ; style="padding-left: 10px; width:25%; height:25%; padding-bottom: 10px; float: right;" alt={{ isFavor }} ; onclick="clickFavor(this.id)"/>
                                                    </blockquote>
                                                </div>

                                            </div>
                                            <p>
                                                    <br> {{ Researcher_info.Bio }}
                                                </p>
{#                                            <div style="display: inline">#}
{#                                                <!-- NOTE 收藏 -->#}
{#                                                <blockquote style="border-style:none;">#}
{#                                                    <img src="../../static/main_style/img/favor-2.png" style="padding-left: 10px; width:12%; height:12%; padding-bottom: 10px; float: right;" alt="favor" onclick="clickFavor(this.id)"/>#}
{#                                                </blockquote>#}
{#                                            </div>#}
{#                                            <p><b>Helo, I’m {{ Researcher_info.Name }}</b><br> {{ Researcher_info.Bio }}#}
{#                                            </p>#}

                                            <p class="text-right">
                                                <img src={{ Researcher_info.Sig }} alt="">
                                            </p>
                                        </div>
                                    </div>
                                </section>
                                <!-- .section -->

                                <section class="section brd-btm">
                                    <div class="row">
                                        <div class="col-sm-6 clear-mrg">
                                            <h2 class="title-thin text-muted">personal information</h2>

                                            <dl class="dl-horizontal clear-mrg">
                                                <dt class="text-upper">Full Name</dt>
                                                <dd>{{ Researcher_info.Name }}</dd>

                                                <dt class="text-upper">D.o.b.</dt>
                                                <dd>{{ Researcher_info.DOB }}</dd>

                                                <dt class="text-upper">Lab</dt>
                                                <dd> {{ Researcher_info.Lab }} </dd>

                                                <dt class="text-upper">e-mail</dt>
                                                <dd><a href={{ "mailto:" + Researcher_info.Email }}> {{ Researcher_info.Email }} </a></dd>

                                                <dt class="text-upper">phone</dt>
                                                <dd>+86 1516 1762 373</dd>

                                            </dl>
                                        </div>
                                        <!-- .col-sm-6 -->

                                        <div class="col-sm-6 clear-mrg">
                                            <h2 class="title-thin text-muted">languages</h2>

                                            <div class="progress-bullets ace-animate" role="progressbar" aria-valuenow="10" aria-valuemin="0" aria-valuemax="10">
                                                <strong class="progress-title">Chinese</strong>
                                                <span class="progress-bar">
                            <span class="bullet fill"></span>
                                                <span class="bullet fill"></span>
                                                <span class="bullet fill"></span>
                                                <span class="bullet fill"></span>
                                                <span class="bullet fill"></span>
                                                <span class="bullet fill"></span>
                                                <span class="bullet fill"></span>
                                                <span class="bullet fill"></span>
                                                <span class="bullet fill"></span>
                                                <span class="bullet fill"></span>
                                                </span>
                                                <span class="progress-text text-muted">native</span>
                                            </div>

                                            <div class="progress-bullets ace-animate" role="progressbar" aria-valuenow="8" aria-valuemin="0" aria-valuemax="10">
                                                <strong class="progress-title">English</strong>
                                                <span class="progress-bar">
                            <span class="bullet fill"></span>
                                                <span class="bullet fill"></span>
                                                <span class="bullet fill"></span>
                                                <span class="bullet fill"></span>
                                                <span class="bullet fill"></span>
                                                <span class="bullet fill"></span>
                                                <span class="bullet fill"></span>
                                                <span class="bullet fill"></span>
                                                <span class="bullet"></span>
                                                <span class="bullet"></span>
                                                </span>
                                                <span class="progress-text text-muted">intermediate</span>
                                            </div>

                                        </div>
                                        <!-- .col-sm-6 -->
                                    </div>
                                    <!-- .row -->
                                </section>
                                <!-- .section -->

                                <section class="section brd-btm">
                                    <div class="row">
                                        <div class="col-sm-6 clear-mrg">
                                            <h2 class="title-thin text-muted">Research Interests</h2>
                                            <div class="row">
                                                {% for interest, proportion in Researcher_info["ResearchInterest"].items() %}
                                                <div class="col-xs-4">
                                                    <div class="progress-chart ace-animate" role="progressbar" aria-valuenow={{ proportion }} aria-valuemin="0" aria-valuemax="100">
                                                        <div class="progress-bar" data-text={{ proportion }}% data-value={{ proportion / 100 }}></div>
                                                        <strong class="progress-title"> {{ interest }} </strong>
                                                    </div>
                                                </div>
                                                <!-- .col-xs-4 -->
                                                {% endfor %}
                                            </div>
                                            <!-- .row -->
                                        </div>
                                        <!-- .col-sm-6 -->

                                        <div class="col-sm-6 clear-mrg">
                                            <h2 class="title-thin text-muted">Mottos</h2>
                                            {% for motto in Researcher_info["Mottos"] %}
                                            <div class="progress-line ace-animate" role="progressbar" aria-valuenow="90" aria-valuemin="0" aria-valuemax="100">
                                                <strong class="progress-title">{{ motto }}</strong>
                                            </div>
                                            {% endfor %}
                                        </div>
                                        <!-- .col-sm-6 -->
                                    </div>
                                    <!-- .row -->
                                </section>
                                <!-- .section -->


                                <section class="section">
                                    <h2 class="title-thin text-muted">Awards and Achievements</h2>
                                    <div class="row">
                                        {% for award, src in Researcher_info["Awards"].items() %}
                                        <div class="col-sm-6 clear-mrg">
                                            <div class="award-box">
                                                <figure class="award-img">
                                                    <img src={{ src }} alt="">
                                                </figure>
                                                <h3 class="award-title">{{ award }}</h3>
                                            </div>
                                        </div>
                                        <!-- .col-sm-6 -->
                                        {% endfor %}
                                    </div>
                                    <!-- .row -->
                                </section>
                                <!-- .section -->
                            </div>
                            <!-- .padd-box -->
                            <!-- END: PAGE CONTENT -->

                        </div>
                        <!-- .ace-paper-cont -->
                    </main>
                    <!-- .ace-paper -->
                </div>
                <!-- .ace-paper-stock -->

            </div>
            <!-- .ace-container -->
        </div>
        <!-- #ace-content -->

        <div id="ace-sidebar">
            <button id="ace-sidebar-close" class="btn btn-icon btn-light btn-shade">
            <span class="ace-icon ace-icon-close"></span>
            </button>

            <div id="ace-sidebar-inner">

                <aside class="widget-area">
                    <section class="widget widget_search">
                        <form role="search" method="post" class="search-form">
                            <label>
                                <span class="screen-reader-text">Search for:</span>
                                {{ form.SideSearch }}
                            </label>
                            {{form.csrf_token}}
                            <!-- {{ form.submit }} -->
                            <button type="submit" class="search-submit" id="SideSubmit">
                                <span class="screen-reader-text">Search</span>
                                <span class="ace-icon ace-icon-search"></span>
                            </button>
                        </form>
                    </section>

                    <section class="widget widget_posts_entries">
                    <h2 class="widget-title">recommendation</h2>
                    <ul>
{#                        {% set st = 0%}#}
{#                        {% set ed = 2 %}#}
                        {% for item in recomm_list %}
                            {% set recomm_url = "../professor/" + item[0] | replace (" ", "%20")  %}
                        <li>
                            <a class="post-image" href={{ recomm_url }}>
                                <img src={{ item[1] }} alt="">
                            </a>
                            <div class="post-content">
                                <h3>
                                    <a href={{ recomm_url }}>{{ item[0] }}</a>
                                </h3>
                            </div>
                            <div class="post-category-comment">
                                <a href="#" class="post-category">{{ item[2] }}</a>
                                <a href="#" class="post-comments">{{ item[3] }}</a>
                            </div>
                        </li>
                        {% endfor %}
                    </ul>
                </section>

                    <div class="tagcloud" style="text-align: center">
                        <button style="font-size: 1em; width: 70px; height: 40px; border: none; border-radius: 5%" onclick=changeRecomm()>Next</button>
                    </div>

                    <br>
                    <br>
                </aside>

            </div>
            <!-- #ace-sidebar-inner -->
        </div>
        <!-- #ace-sidebar -->

        <footer id="ace-footer" class="ace-container-shift">
            <div class="ace-container">
                <div class="ace-footer-cont clear-mrg">
                    <p class="text-center">@ EE447 Mobile Network Final Project @</p>
                </div>
            </div>
            <!-- .ace-container -->
        </footer>
        <!-- #ace-footer -->

        <!-- Triangle Shapes -->
        <svg id="ace-bg-shape-1" class="hidden-sm hidden-xs" height="519" width="758">
        <polygon points="0,455,693,352,173,0,92,0,0,71" style="fill:#d2d2d2;stroke:purple;stroke-width:0; opacity: 0.5"></polygon>
        </svg>

        <svg id="ace-bg-shape-2" class="hidden-sm hidden-xs" height="536" width="633">
        <polygon points="0,0,633,0,633,536" style="fill:#c0e3e7;stroke:purple;stroke-width:0"></polygon>
        </svg>

    </div>
    <!-- .ace-wrapper -->

    <!-- Scripts -->
    <script type="text/javascript" src="../../static/main_style/js/vendor/jquery-1.12.4.min.js"></script>


    <!---<script type="text/javascript" src="http://ditu.google.cn/maps/api/js?key=AIzaSyDiwY_5J2Bkv2UgSeJa4NOKl6WUezSS9XA"></script>--->
    <script type="text/javascript" src="../../static/main_style/js/plugins/highlight/highlight.pack.js"></script>
    <script type="text/javascript" src="../../static/main_style/js/plugins/jquery.mCustomScrollbar.min.js"></script>
    <script type="text/javascript" src="../../static/main_style/js/plugins/isotope.pkgd.min.js"></script>
    <script type="text/javascript" src="../../static/main_style/js/plugins/progressbar.min.js"></script>
    <script type="text/javascript" src="../../static/main_style/js/plugins/slick.min.js"></script>

    <script type="text/javascript" src="../../static/main_style/js/options.js"></script>
    <script type="text/javascript" src="../../static/main_style/js/main.js"></script>
</body>

</html>